<template>
    <div id="dashboard">
        通过辅助函数来ACTION <button @click="setUserAge2">修改修改年龄</button>
        异步操作修改数据: <button @click="changeAge3()">异步修改年龄</button>
        <hr>
        通过辅助函数:<button @click="setUserAge(18)">修改年龄</button><button @click="setUserSex(1)">修改性别</button>
        <hr>
        正确的修改方式：<button @click="changeAge2()">修改年龄</button>
        <hr>
        通过组件中的计算属性：{{getUserSex}} - {{getUserAge}} -{{getUserHeight}}
        <hr>
        正确的方式：{{ $store.getters.getUserSex}}
        <hr>
        <h1>后台首页-  欢迎页面！{{$store.state.userInfo.name}} - 性别:{{$store.state.userInfo.sex}}</h1>
        <button @click="changeName()">改名字</button>
        <button @click="changeAge()">改年龄</button>
    </div>
</template>

<script>
// 导入Vuex中的mapGetters 辅助函数 ，帮助快速的将store中的getters映射到局部组件的计算属性中
import { mapGetters , mapMutations , mapActions } from 'vuex'

export default {
    created(){
        console.log(this);
    },
    computed:{
        ...mapGetters([
            'getUserSex',
            'getUserAge',
            'getUserHeight'
        ])
        // getUserSex(){
        //     return this.$store.getters.getUserSex;
        // },
        //  getUserAge(){
        //     return this.$store.getters.getUserAge;
        // },
        //  getUserHeight(){
        //     return this.$store.getters.getUserHeight;
        // }
    },
    methods:{
        ...mapActions([//通过mapActions 辅助函数将Vuex中的actions映射到局部组件的方法中使用
            'setUserAge2'
        ]),
        ...mapMutations([//通过mapMutations辅助函数将vuex中的mutations映射到局部组件的方法中，当做方法使用
            'setUserAge',
            'setUserSex'
        ]),
        changeName(){//错误做法
            this.$store.state.userInfo.name = '李四';
        },
        changeAge(){//错误做法
            this.$store.state.userInfo.age=180000;
        },
       changeAge2(){
             this.$store.commit('setUserAge',3000);
        },
        changeAge3(){
            //调用actions 中的异步方法 setUserAge2()
            this.$store.dispatch('setUserAge2');
        }
    }
}
</script>

<style>

</style>
